import React, {memo, useEffect, useState} from "react";
import {WELLS_COLUMN, WELLS_ROW} from "../../pages/main/plate/config";
import {useDispatch, useSelector} from "react-redux";

import "./index.css";
import {deepClone} from "../../common/utils";

export default memo(function TwoPeakFlagTable(props) {
  const dispatch = useDispatch();
  const {plateClass, setWellId} = props;
  const {data, analysisShowLineArr} = useSelector(state => ({
    data: state.dataReducer.data,
    analysisShowLineArr: state.plateReducer.analysisShowLineArr  //  包含可以画线的well(同时有target和sampleName)
  }));
  const [wells, setWells] = useState(data.wells);
  let cloneWells = [];

  useEffect(() => {
    cloneWells = deepClone(wells, cloneWells);
    analysisShowLineArr.forEach(item => {
      if (item.tm2 !== "-") {
        cloneWells[item.id].twoPeakFlag = true;
      }
    });
    setWells(cloneWells);
  }, [analysisShowLineArr]);

  return (
    <section className={plateClass || "runPagePlateTable"}>
      <div>
        <div/>
        <div>
          {
            WELLS_COLUMN.map((col, index) => <div key={col}>{col}</div>)
          }
        </div>
      </div>
      <div>
        {
          WELLS_ROW.map((row, index) => <div key={row}>{row}</div>)
        }
      </div>
      <div>
        {
          wells.map((well, index) => (
            <div key={well.row * 12 + well.col} style={{position: "relative"}}>
              <div className={well.twoPeakFlag ? "twoPeakFlag" : null}/>
            </div>
          ))
        }
      </div>
    </section>
  );
});